<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom</title>
	<style>
		.nav {
			height: 30px;
			width: 400px;
			/*border: 1px solid #009966;*/
			padding: 0;
			margin: 0px;
			padding-left: 10px;
			/*border-bottom: 2px solid #009966;*/
		}

		.nav li {
			display: inline-block;
			list-style-type: none;
			padding: 0;
			/*border: 1px solid #ddd;
			margin-right: -7px;*/
		}

		.nav li a {
			display: block;
			float:left;
			height: 30px;
			line-height: 30px;
			color: #1100ff;
			border-radius: 3px;
			background: #eee;
			padding: 2px 5px;
			font-size: 14px;
			font-weight: bold;
			font-family: 'Microsoft Yahei';
			min-width: 60px;
			text-align: center;
			transition: all .8s;
			text-decoration: none;
		}

		.nav li a:hover{
			background: #eea236;
			box-shadow: 1px 1px 10px #111;
		}

		.nav li .arrow {
			float: left;
			width: 0;
			height: 0;
			border:6px solid transparent;
			border-top: 6px solid #0077fa;
			margin-top: 15px;
			display: none;
			margin-left: 4px;
			transform-origin:center 1px;
			transition: all .3s;
		}

		.nav li:hover .arrow {
			transform:rotate(180deg);
		}

		.nav li.active .arrow{
			display: block;
		}

		.nav li.active a {
			background: #5bc0de;
		}
	</style>

	<script>
		(function(win){
			window.onload = function() {
				var navObj = document.getElementById("nav");
				var items = navObj.getElementsByTagName("li");
				for (var i = 0; i < items.length; i++){
					(function(){
						var item = items[i];
						item.onclick = function() {
							console.log("item click",item);
							for (var j = 0; j < items.length; j++){
								(function() {
									if(item !== items[j] && items[j].className){
										items[j].className = "";
									}
								})(j);
							}
							item.className = "active";
						}
					})(i);
				}
			}
		})(window);
	</script>
</head>
<body>
	<ul class="nav" id="nav">
		<li class="active">
			<a href="#">
				CSS3
			</a>
			<div class="arrow"></div>
		</li>
		<li>
			<a href="#">Javascript</a>
			<div class="arrow"></div>
		</li>
		<li>
			<a href="#">HTML5</a>
			<div class="arrow"></div>
		</li>
	</ul>
</body>
</html>